<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例1</title>
    <style>
        .numbox1{border-color: red;}
    </style>
</head>
<body>
    <input type="text" class="num-box1"  value="50"> 
    *
    <input type="text" class="num-box2" value="3"> 
    <input type="button" class="btn-box" value="=">
    <input type="text" class="res-box"> 
    
    <script>
        // 错误代码：
        let numBox1 = document.querySelector('.num-box1').value // numBox1 = 50
        let numBox2 = document.querySelector('.num-box2').value // numBox2 = 3
        let resBox = document.querySelector('.res-box').value // resBox = undefined
        let btnBox = document.querySelector('.btn-box')

        btnBox.onclick = function(){
            resBox = numBox1 * numBox2 // resBox = 50 * 3
        }

    </script>



    <!-- <input type="button" value="确定"> -->

    <!-- 
        表单： 通过输入框、单选框、多选框、按钮等方式，收集用户信息的
        input 表单控件
            - [type] 类型
                - text 文本框
                - button 按钮
            - [value] 值
     -->
    <!-- <input type="radio">
    <input type="checkbox"> -->

</body>
</html>